<template>
  <div class="max">
    <h1>热门推荐</h1>
    <div class="pictrue-text" v-for="item of listrecom" :key="item.id">
      <router-link tag="div" class="img" :to="'/detail/'+item.id">
        <img :src="item.imgurl">
      </router-link>
      <div class="img-text">
        <p class="title">{{item.title}}</p>
        <p>{{item.desc}}</p>
        <p class="btn">查看详情</p>
      </div>
    </div>
  </div>
</template>

<script>
export default { //  组件配置项
  name: 'Popularrecommendation',
  props: {
    listrecom: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .max
    margin-top 0.2rem
    .pictrue-text
      height 150px
      margin-top 0.2rem
      border-bottom 1px solid silver
      .img
        float left
        width 35%
        img
          width 100%
          height 2.9rem
      .img-text
        float right
        width 65%
        padding-left 0.4rem
        p
          line-height 0.7rem
        .btn
          width 2rem
          height 0.7rem
          line-height 0.7rem
          background #ffb436
          text-align center
          color white
    h1
      padding 0.3rem
      background #CACACA
</style>
